<template>
  <div :class="[
            `${classPrefix}`,
         ]">
    <div :class="[`${classPrefix}__header`]" v-if="showDateHeader">
      <span :class="[`${classPrefix}__header-pre`]">
        <Icon name="caretDoubleLeft" @click.stop="jumpDate('pre-year')"></Icon>
        <Icon name="caretLeft" @click.stop="jumpDate('pre-month')" v-if="dateChangeIconShow"></Icon>
      </span>
      <span :class="[`${classPrefix}__header-date`]">
        <span
          :class="[`${classPrefix}__header-date-label`]"
          @click.stop="updateCurrentType('year')"
        >{{year}}{{addTo('m.datePicker.year')}}</span>
        <span
          :class="[`${classPrefix}__header-date-label`]"
          @click.stop="updateCurrentType('month')"
          v-if="headerMonthShow"
        >{{month}}{{addTo('m.datePicker.month')}}</span>
      </span>
      <span :class="[`${classPrefix}__header-next`]">
        <Icon name="caretRight" @click.stop="jumpDate('next-month')" v-if="dateChangeIconShow"></Icon>
        <Icon name="caretDoubleRight" @click.stop="jumpDate('next-year')"></Icon>
      </span>
    </div>
    <div :class="[`${classPrefix}__header`]" v-if="showTimeHeader">
      <span
        :class="[`${classPrefix}__header-date`]"
      >{{index === 0 ? addTo('m.datePicker.startTime') : addTo('m.datePicker.endTime')}}</span>
    </div>
    <div :class="[`${classPrefix}__body`]">
      <template v-if="pickerType === 'date'">
        <date-pane-date
          :type="currentType"
          :year="year"
          :month="month"
          :date="date"
          :index="index"
          :hover-date="hoverDate"
          :currentDate="currentDate"
          :is-range="isRange"
          @updateWeek="updateSelectWeek"
          @updateDate="updateSelectDate"
          @hover-date="handleHoverDate"
          v-show="currentType === 'date' || currentType === 'week'"
        ></date-pane-date>
        <date-pane-year
          :type="currentType"
          :year="year"
          :month="month"
          :date="date"
          :index="index"
          :currentDate="currentDate"
          :is-range="isRange"
          @update-year="updateSelectYear"
          v-show="currentType === 'year'"
        ></date-pane-year>
        <date-pane-month
          :type="currentType"
          :year="year"
          :month="month"
          :date="date"
          :index="index"
          :currentDate="currentDate"
          :is-range="isRange"
          @update-month="updateSelectMonth"
          v-show="currentType === 'month'"
        ></date-pane-month>
      </template>
      <date-pane-time
        :type="currentType"
        :year="year"
        :month="month"
        :date="date"
        :index="index"
        :hover-date="hoverDate"
        :currentDate="currentDate"
        :is-range="isRange"
        @update-time="updateSelectTime"
        v-show="currentType === 'time' || currentType === 'timerange'"
      ></date-pane-time>
    </div>
  </div>
</template>

<script>
import Config from "/src/config";
import Icon from "/src/components/icon";
import DatePaneTime from "./datePaneTime";
import DatePaneDate from "./datePaneDate";
import DatePaneYear from "./datePaneYear";
import DatePaneMonth from "./datePaneMonth";
import Locale from "/src/utils/locale";

export default {
  name: "DatePaneSingle",
  mixins: [Locale],
  inject: ["picker"],
  props: {
    type: String,
    index: Number,
    year: Number,
    month: Number,
    date: Array,
    hoverDate: Date,
    isRange: Boolean,
    pickerType: String,
  },
  data() {
    const currentType = [
      "date",
      "daterange",
      "datetime",
      "datetimerange",
    ].includes(this.type)
      ? "date"
      : this.type;
    const nowDate = new Date();
    return {
      classPrefix: Config.classPrefix + "-date-pane-single",
      currentType: currentType,
      currentDate: {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      },
    };
  },
  computed: {
    dateChangeIconShow() {
      return ["date", "daterange", "week"].includes(this.currentType);
    },
    headerMonthShow() {
      return !["year", "month"].includes(this.currentType);
    },
    yearJumpStep() {
      return ["year"].includes(this.currentType) ? 10 : 1;
    },
    showDateHeader() {
      return !["time", "timerange"].includes(this.currentType);
    },
    showTimeHeader() {
      return this.isRange && ["time", "timerange"].includes(this.currentType);
    },
  },
  components: {
    Icon,
    DatePaneTime,
    DatePaneDate,
    DatePaneYear,
    DatePaneMonth,
  },
  methods: {
    jumpDate(type) {
      this.updateSingleDate(type, null, null);
    },
    updateCurrentType(type) {
      this.currentType = type;
    },
    handleHoverDate(date) {
      this.$emit("hover-date", this.index, date);
    },
    updateSelectDate(date) {
      date = [date[0]];
      this.$emit("update-date", this.index, date);
    },
    updateSelectTime(date) {
      this.$emit("update-date", this.index, date, "time");
    },
    updateSelectWeek(date) {
      this.$emit("update-date", this.index, date);
    },
    updateSelectYear(year) {
      if (this.type === "year") {
        this.updateSelectDate([new Date(year.toString())]);
      } else {
        this.updateCurrentType("month");
      }
      this.updateSingleDate("update-year", year, null);
    },
    updateSelectMonth(month) {
      if (
        ["date", "daterange", "datetime", "datetimerange"].includes(this.type)
      ) {
        this.currentType = "date";
      } else if (this.type === "week") {
        this.currentType = "week";
      } else {
        const date = new Date(this.year, month - 1);
        this.updateSelectDate([date]);
      }
      this.updateSingleDate("update-month", null, month);
    },
    updateSingleDate(type, year, month) {
      year = year || this.year;
      month = month || this.month;
      this.$emit("update-pane", {
        type,
        year: year,
        month: month,
        jumpStep: this.yearJumpStep,
        index: this.index,
      });
    },
  },
};
</script>
